{include file="$header" /}
<div class="mk-app-warp">
    <el-row :gutter="20">
        <el-col :sm="24" :md="8">
            <el-form
                class="mk-personal-form"
                :model="formData" 
                ref="formData" 
                :rules="formRules" 
                label-width="70px">
                <el-form-item label="头像：" prop="cover">
                    <mk-file-select v-model="formData.cover"></mk-file-select>
                </el-form-item>
                <el-form-item label="昵称：" prop="nickname">
                    <el-input v-model="formData.nickname" placeholder="请输入管理员昵称" maxlength="40" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="邮箱：" prop="email">
                    <el-input v-model="formData.email" placeholder="请输入管理员邮箱"></el-input>
                </el-form-item>
                <el-form-item label="账号：" prop="account">
                    <el-input 
                        v-model="formData.account" 
                        placeholder="请输入管理员登录账号" 
                        maxlength="40" 
                        show-word-limit 
                        :disabled="true">
                    </el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input
                        v-model="formData.password" 
                        placeholder="留空则为原密码" 
                        show-password>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button 
                        type="primary" 
                        size="small" 
                        icon="el-icon-refresh-right"
                        @click="saveForm()" 
                        :loading="formLoading"
                        v-if="editAuthority">
                        保存资料
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :sm="24" :md="16">
            <mk-table-header
                keyword-title="标题、Url、IP关键词搜索"
                @search="searchData($event)"
                date-title="操作时间：">
            </mk-table-header>
            <el-alert
                title="系统日志文件超过一定大小时，会自动清理。"
                type="success"
                :closable="false">
            </el-alert>
            <el-table
                :data="table"
                v-loading="loading">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left"  label-width="130px">
                            <el-form-item label="POST内容：">
                                <span>{{ props.row.post}}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column prop="userAccount" label="用户名"></el-table-column>
                <el-table-column prop="title" label="标题"></el-table-column>
                <el-table-column prop="path" label="Url"></el-table-column>
                <el-table-column prop="ip" label="IP"></el-table-column>
                <el-table-column prop="date" label="操作时间"></el-table-column>
            </el-table>
            <el-pagination
                @size-change="pageSizeChange"
                @current-change="pageChange"
                :current-page="search.page"
                :page-size="search.pageSize"
                :page-sizes="pageSizes"
                :total="pageTotal"
                layout="total, sizes, prev, pager, next, jumper"
                background
                hide-on-single-page>
            </el-pagination>
        </el-col>
    </el-row>
</div>
{include file="$component" /}
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                rows: [],
                table: [],
                search:{
                    date: [],
                    keyword: "",
                    page: 1,
                    pageSize: 10,
                },
                pageSizes: [10, 50, 100, 200, 500, 1000, 3000],
                pageTotal: 0,
                url: "adminUser/personal",
                editUrl: "adminUser/personalUpdate",
                delUrl: "adminUser/logDel",
                loading: false,
                formLoading: false,
                formData: userInfo,
                formRules: {
                    nickname: [
                        { required: true, message: '请输入管理员昵称', trigger: 'blur' },
                        { min: 2, max: 40, message: '长度在 2 到 40 个字符', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '请输入管理员邮箱', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                    ],
                    account: [
                        { required: true, message: '请输入管理员登录账号', trigger: 'blur' },
                        { min: 5, max: 40, message: '长度在 5 到 40 个字符', trigger: 'blur' }
                    ],
                },
            }
        },
        created () {
            this.formData.password = "";
            this.getData();
        },
        computed: {
            editAuthority() {
                return authorityPath.indexOf(this.editUrl) !== -1;
            },
        },
        methods: {
            /**
             * 获取数据
             */
            getData() {
                let self     = this;
                self.loading = true;
                request.post(self.url, self.search, function(res) {
                    self.loading   = false;
                    self.table     = res.data;
                    self.pageTotal = res.count;
                });
            },
            /**
             * 保存表单
             */
            saveForm() {
                let self = this;
                self.$refs.formData.validate((valid) => {
                    if (valid) {
                        self.formLoading = true;
                        request.post(self.editUrl, self.formData, function(res){
                            self.$message({ showClose: true, message: res.message, type: res.status});
                            if (res.status != 'success') {
                                self.getData();
                            } else {
                                parent.parentVm.userCover = self.formData.cover;
                            }
                            self.formLoading = false;
                        });
                    } else {
                        return false;
                    }
                });
            },
            /**
             * 重置表单
             */
            resetForm() {
                this.$refs.formData.resetFields();
            },
            /**
             * 关键词/日期搜索
             * @param  {Object} value 搜索内容
             */
            searchData(value) {
               this.search = Object.assign({}, this.search, {page: 1, date: value.date, keyword: value.keyword});
            },
            /**
             * 分页数量改变时
             * @param  {Number} val 每页数量
             */
            pageSizeChange(val) {
                this.search = Object.assign({}, this.search, {pageSize: val});
            },
            /**
             * 分页改变时
             * @param  {String} val 当前页
             */
            pageChange(val) {
                this.search = Object.assign({}, this.search, {page: val});
            }
        },
        watch: {
            search() {
                this.getData();
            }
        }
    })
</script>
{include file="$footer" /}